@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    min-height: calc(100% + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  body {
    @apply bg-zinc-900;
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI,
      Roboto,
      Helvetica Neue,
      Arial,
      Noto Sans,
      sans-serif,
      Apple Color Emoji,
      Segoe UI Emoji,
      Segoe UI Symbol,
      Noto Color Emoji;
  }

  code {
    @apply rounded-md bg-zinc-800 px-2 py-1;
  }

  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
}

@layer components {
  .searchbar {
    padding-top: env(safe-area-inset-top);
    height: calc(4rem + env(safe-area-inset-top));
  }

  .transparent-glass-bg {
    --tw-bg-opacity: 0.22;
    background-color: rgb(24 24 27 / var(--tw-bg-opacity));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.8px);
    -webkit-backdrop-filter: blur(5.8px);
  }

  .max-width-form {
    max-width: 60rem;
  }
  .max-width-form-head {
    max-width: 61rem;
  }

  .w-105 {
    width: 38rem;
  }

  .button-text {
    font-weight: 600;
  }

  .sidebar {
    @apply border-r border-zinc-700;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    background: linear-gradient(180deg, rgb(43, 43, 49, 1) 0%, #18181b 100%);
  }

  .rules-button-text {
    /* padding-top: 0.17rem;
    margin-left: 0.25rem;
    margin-right: 0.75rem; */
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity));
    font-weight: 600;
  }

  .cards-vertical {
    grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  }

  .collection-cards-vertical {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    @apply grid gap-4;
  }

  .collection {
    @apply border-r border-zinc-700;
  }
  .collection-backdrop {
    display: block;
    overflow: hidden;
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    margin: 0px;
  }
  .backdrop-image {
    padding: 0px;
    border: none;
    margin: auto;
    min-width: 50%;
    max-width: 50%;
    height: 100%;
    opacity: 0.08;
    object-fit: cover;
    display: inline-block;
    background-repeat: no-repeat;
  }

  .slideover {
    padding-top: calc(1.5rem + env(safe-area-inset-top));
    padding-bottom: 1.5rem;
  }

  .sidebar-close-button {
    top: env(safe-area-inset-top);
  }

  .cancel-button {
    background-color: #444444;
  }

  .cancel-button:hover {
    background: #4e586e;
  }

  .edit-button {
    @apply /* background-color: #3f3f46; */ bg-amber-900;
  }

  .edit-button:hover {
    @apply /* background: #3a3a42; */ bg-amber-800;
  }

  .delete-button {
    background-color: #18181b;
  }

  .delete-button:hover {
    background: #202024;
  }

  .plex-button {
    @apply flex w-full justify-center rounded-md border border-transparent bg-amber-600 px-4 py-2 text-center text-sm font-medium text-white transition duration-150 ease-in-out disabled:opacity-50;
    background-color: #cc7b19;
  }

  .plex-button:hover {
    background: #f19a30;
  }

  ul.cards-vertical,
  ul.cards-horizontal {
    @apply grid gap-4;
  }

  ul.cards-vertical {
    grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  }

  ul.cards-horizontal {
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  }

  .slider-header {
    @apply relative mb-4 mt-6 flex;
  }

  .slider-title {
    @apply inline-flex items-center text-xl font-bold leading-7 text-zinc-300 sm:truncate sm:text-2xl sm:leading-9;
  }

  a.slider-title {
    @apply transition duration-300 hover:text-white;
  }

  a.slider-title svg {
    @apply ml-2 h-6 w-6;
  }

  .media-page {
    @apply relative -mx-4 bg-cover bg-center px-4;
    margin-top: calc(-4rem - env(safe-area-inset-top));
    padding-top: calc(4rem + env(safe-area-inset-top));
  }

  .media-page-bg-image {
    @apply absolute inset-0 h-full w-full;
    z-index: -10;
  }

  .media-header {
    @apply flex flex-col items-center pt-4 xl:flex-row xl:items-end;
  }

  .media-poster {
    @apply w-32 overflow-hidden rounded shadow md:w-44 md:rounded-lg md:shadow-2xl xl:mr-4 xl:w-52;
  }

  .media-status {
    @apply mb-2 space-x-2;
  }

  .media-title {
    @apply mt-4 flex flex-1 flex-col text-center text-white xl:mr-4 xl:mt-0 xl:text-left;
  }

  .media-title > h1 {
    @apply text-2xl font-bold xl:text-4xl;
  }

  h1 .media-year {
    @apply text-2xl;
  }

  .media-attributes {
    @apply mt-1 flex flex-wrap items-center justify-center space-x-1 text-xs text-zinc-300 sm:text-sm xl:mt-0 xl:justify-start xl:text-base;
  }

  .media-attributes a {
    @apply transition duration-300 hover:text-white hover:underline;
  }

  .media-actions {
    @apply relative mt-4 flex flex-shrink-0 flex-wrap items-center justify-center sm:flex-nowrap sm:justify-end xl:mt-0;
  }

  .media-actions > * {
    @apply mb-3 sm:mb-0;
  }

  .media-overview {
    @apply flex flex-col pb-4 pt-8 text-white lg:flex-row;
  }

  .media-overview-left {
    @apply flex-1 lg:mr-8;
  }

  .tagline {
    @apply mb-4 text-xl italic text-zinc-400 lg:text-2xl;
  }

  .media-overview h2 {
    @apply text-xl font-bold text-zinc-300 sm:text-2xl;
  }

  .media-overview p {
    @apply pt-2 text-sm text-zinc-400 sm:text-base;
  }

  ul.collection-info {
    @apply mt-6 grid grid-cols-2 gap-6 sm:grid-cols-3;
  }

  ul.collection-info > li {
    @apply col-span-1 flex flex-col font-bold text-zinc-300;
  }

  .collection-info-item,
  .media-fact-value a,
  .media-fact-value button {
    @apply font-normal text-zinc-400;
  }

  .media-overview-right {
    @apply mt-8 w-full lg:mt-0 lg:w-80;
  }

  .media-facts {
    @apply rounded-lg border border-zinc-700 bg-zinc-900 text-sm font-bold text-zinc-300 shadow;
  }

  .media-fact {
    @apply flex justify-between border-b border-zinc-700 px-4 py-2 last:border-b-0;
  }

  .media-fact-value {
    @apply ml-2 text-right text-sm font-normal text-zinc-400;
  }

  .media-ratings {
    @apply flex items-center justify-center border-b border-zinc-700 px-4 py-2 font-medium last:border-b-0;
  }

  .media-rating {
    @apply mr-4 flex items-center last:mr-0;
  }

  .error-message {
    @apply relative bottom-0 left-0 right-0 top-0 flex h-screen flex-col items-center justify-center text-center text-zinc-300;
  }

  .heading {
    @apply text-2xl font-bold leading-8 text-zinc-100;
  }

  .sm-heading {
    @apply text-lg font-bold leading-8 text-zinc-100;
  }

  .description {
    @apply mt-1 max-w-4xl text-sm leading-5 text-zinc-400;
  }

  .sm-description {
    @apply mt-1 max-w-4xl text-xs leading-5 text-zinc-400;
  }

  img.avatar-sm {
    @apply mr-1 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105;
  }

  .card-field {
    @apply flex items-center truncate py-0.5 text-sm sm:py-1;
  }

  .card-field-name {
    @apply mr-2 font-bold;
  }

  .card-field a {
    @apply transition duration-300 hover:text-white hover:underline;
  }

  .section {
    @apply mb-10 mt-6 text-white;
  }

  .form-row {
    @apply mt-6 max-w-6xl sm:mt-5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4;
  }

  .form-input {
    @apply border-0 bg-inherit text-sm text-white sm:col-span-2;
  }

  .form-input-field {
    @apply flex max-w-xl rounded-md shadow-sm;
  }

  .actions {
    @apply mt-8 border-t border-zinc-700 pt-5 text-white;
  }

  label,
  .group-label {
    @apply mb-1 block text-sm font-bold leading-5 text-zinc-400;
  }

  label.checkbox-label {
    @apply sm:mt-1;
  }

  label.text-label {
    @apply sm:mt-2;
  }

  label a {
    @apply text-zinc-100 transition duration-300 hover:text-white hover:underline;
  }

  .label-required {
    @apply ml-1 text-red-500;
  }

  .label-tip {
    @apply block font-medium text-zinc-500;
  }

  button,
  input,
  select,
  textarea {
    @apply disabled:cursor-not-allowed;
  }

  input[type='checkbox'] {
    @apply h-6 w-6 rounded-md text-amber-600 transition duration-150 ease-in-out default:ring-amber-600 checked:ring-amber-800;
  }

  input[type='text'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  select,
  textarea {
    @apply block w-full min-w-0 flex-1 rounded-md border border-zinc-500 bg-zinc-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5;
  }

  input.rounded-l-only,
  select.rounded-l-only,
  textarea.rounded-l-only {
    @apply rounded-r-none;
  }

  input.rounded-r-only,
  select.rounded-r-only,
  textarea.rounded-r-only {
    @apply rounded-l-none;
  }

  input.short {
    @apply w-20;
  }

  select.short {
    @apply w-min;
  }

  button > span {
    @apply whitespace-nowrap;
  }

  button.input-action {
    @apply relative -ml-px inline-flex items-center border border-zinc-500 bg-amber-600 px-3 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out last:rounded-r-md hover:bg-amber-500 active:bg-zinc-100 active:text-zinc-700 sm:px-3.5;
  }

  .button-md svg,
  button.input-action svg,
  .plex-button svg {
    @apply ml-2 mr-2 h-5 w-5 first:ml-0 last:mr-0;
  }

  .button-sm svg {
    @apply ml-1.5 mr-1.5 h-4 w-4 first:ml-0 last:mr-0;
  }

  .modal-icon {
    @apply mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-zinc-800 text-white ring-1 ring-zinc-500 sm:mx-0 sm:h-10 sm:w-10;
  }

  .modal-icon svg {
    @apply h-6 w-6;
  }

  svg.icon-md {
    @apply h-5 w-5;
  }

  svg.icon-sm {
    @apply h-4 w-4;
  }

  .protocol {
    @apply inline-flex cursor-default items-center rounded-l-md border border-r-0 border-zinc-500 bg-zinc-600 px-3 text-zinc-100 sm:text-sm;
  }

  .error {
    @apply mt-2 text-sm text-red-500;
  }

  .form-group {
    @apply mt-6 text-white;
  }

  .prose a {
    color: #ed7924;
  }
  .prose a:hover {
    color: #8d4c1c;
  }
  .react-select-container {
    @apply w-full;
  }

  .react-select-container .react-select__control {
    @apply rounded-md border border-zinc-500 bg-zinc-700 text-white hover:border-zinc-500;
  }

  .react-select-container-dark .react-select__control {
    @apply border border-zinc-700 bg-zinc-800;
  }

  .react-select-container .react-select__control--is-focused {
    @apply rounded-md border border-zinc-500 bg-zinc-700 text-white shadow;
  }

  .react-select-container-dark .react-select__control--is-focused {
    @apply border-zinc-600 bg-zinc-800;
  }

  .react-select-container .react-select__menu {
    @apply bg-zinc-700 text-zinc-300;
  }

  .react-select-container-dark .react-select__menu {
    @apply bg-zinc-800;
  }

  .react-select-container .react-select__option--is-focused {
    @apply bg-zinc-600 text-white;
  }

  .react-select-container-dark .react-select__option--is-focused {
    @apply bg-zinc-700;
  }

  .react-select-container .react-select__indicator-separator {
    @apply bg-zinc-500;
  }

  .react-select-container .react-select__indicator {
    @apply text-zinc-500;
  }

  .react-select-container .react-select__placeholder {
    @apply text-zinc-400;
  }

  .react-select-container .react-select__multi-value {
    @apply rounded-md border border-zinc-500 bg-zinc-800;
  }

  .react-select-container .react-select__multi-value__label {
    @apply text-white;
  }

  .react-select-container .react-select__multi-value__remove {
    @apply cursor-pointer rounded-r-md hover:bg-red-700 hover:text-red-100;
  }

  .react-select-container .react-select__input {
    @apply border-none text-base shadow-sm ring-0;
  }

  .react-select-container .react-select__input input:focus {
    @apply border-none;
    box-shadow: none;
  }

  .react-select-container .react-select__input-container {
    @apply text-white;
  }

  .react-select-container .react-select__input-container,
  .react-select-container .react-select__placeholder,
  .react-select-container .react-select__single-value {
    @apply font-semibold text-white;
  }
}

@layer utilities {
  .absolute-top-shift {
    top: calc(-4rem - env(safe-area-inset-top));
  }

  .min-h-screen-shift {
    min-height: calc(100vh + env(safe-area-inset-top));
  }

  /* Used for animating height */
  .extra-max-height {
    max-height: 100rem;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  @media all and (display-mode: browser) {
    .pwa-only {
      @apply hidden;
    }
  }
}
